
<template>
    <h1>我的工资 {{ money }}</h1>
    <button @click="money += 1000">点我加工资 1000</button>

    <div>{{ obj }}</div>
    <button @click="obj.age++">点我年龄+1</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';

// watch监视, 接收三个参数
// 1. 参数1: 监视的数据源
// 2. 参数2: 回调函数
// 3. 参数3: 额外的配置

let money = ref(10000)
let count = ref(0)
const obj = ref({
    name: 'zs', age: 20
})
// {
//     value: {
//         name: 'zs', age: 20
//     }
// }


// 1. 监听单个属性(常见)
watch(money, (val, oldVal) => {
    console.log('新的值 -----> ', val);
    console.log('旧的值 -----> ', oldVal);
})
// 2. 写法2，监听多个数据源，了解即可
// watch([money, count], (val, oldVal) => {
//     console.log('新的值 -----> ', val);
//     console.log('旧的值 -----> ', oldVal);
// })

// 写法3，监听对象
watch(obj, (val, oldVal) => {
    console.log('新的值 -----> ', val);
    console.log('旧的值 -----> ', oldVal);
}, { deep: true, immediate: true })

// 写法4，监听对象的某个属性,了解即可
// watch(
//     () => obj.value.age,
//     (val, oldVal) => {
//         console.log('新的值 -----> ', val);
//         console.log('旧的值 -----> ', oldVal);
//     }
// )
</script>